<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js" type="text/javascript"></script>
<STYLE>
body,input {
	font-family: Calibri, Arial;
}

#sometext {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid black;
	background-color: #FFEE88;
}
</STYLE>
</head>
<body>
	<h2>Project Story!</h2>

	<P>The time on the server is ${serverTime}.</P>
	<P>Story: ${mysStory}</P>
	<a href="/mestory/story">Home</a>
	<script type="text/javascript">
		$(document).ready(function() {
			jQuery.support.cors = true;
			$.ajax({
				url : 'http://10.84.5.134:8080/mestory/rest/load',
				type : 'GET',
				dataType : "xml",
				data : '',
				success : function(xml) {
					$story = $(xml).find('story');
					$("#content").html("<p>" + $story.find("left").text() + "</p>");
					$("#content").append("<p>success get</p>");
					alert(xml.html());
				},
				error : function(xhr, ajaxOptions, thrownError) {
					alert(thrownError);
					$("#content").append("<p>Error: " + xhr.status + "," + thrownError + "</p>");
				}
			});
			$.ajax({
				url : 'http://10.84.5.134:8080/mestory/rest/save',
				beforeSend: setHeader,
				type : 'POST',
				dataType : "xml",
				data : '<?xml version="1.0" encoding="UTF-8"?>',
				error : function(xhr, ajaxOptions, thrownError) {
					$("#content").append("<p>Error: " + xhr.status + "," + thrownError + "</p>");
				},
				success : function(xml) {
					$("#content").append("<p>success saveMeStory</p>");
				}

			});
		});
		function setHeader(xhr) {
            xhr.setRequestHeader('content-type', 'application/xml');
        }

	</script>
	<input type="button" value="FadeOut" onclick="fade('sometext', this)" />
	<br />
	<br />
	<div id="sometext">This text will Fade In and Out.</div>
	<div id="content"></div>
	<div id="save">Save</div>

	<SCRIPT>
		function fade(div_id, button) {

			if (button.value == 'FadeOut') {
				$('#' + div_id).fadeOut('slow');
				button.value = 'FadeIn';
			} else {
				$('#' + div_id).fadeIn('slow');
				button.value = 'FadeOut';
			}
		}
	</SCRIPT>

	<form method="post" action="http://localhost:8080/mestory/upload" enctype="multipart/form-data">
		<input name="uploadFile" type="file"> <input type="submit" />
	</form>

</body>
</html>
